<template>
  <div class="container">
    <FormList
        ref="formRef"
        :formList="listData.editAddList"
        :num="24"
        :gutter="24"
        layout="horizontal"
        :btnSpan="18"
        :showResetBtn="false"
        btnTitle="保存"
        :labelCol="4"
        :wrapperCol="18"
        :btnWarpSpan="14"
        :btnWarpOffset="4"
        @Search="editForm"
    />
  </div>
</template>

<script setup>
import {ref} from "vue";
import {getList, edit} from "@/api/system";
import {reactive} from "vue";
import {message} from "ant-design-vue";

const props = defineProps({
  type: String,
});
const formRef = ref();
const state = reactive({
  formData: {},
});

const listData = reactive({
  editAddList: [
    {
      type: "editor", //类型
      label: "11", //标签
      name: "energy_rule", //字段
      rules: [{ required: true, message: "请输入" }], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "editor", //类型
      label: "兑换注意事项", //标签
      name: "energy_notice", //字段
      rules: [{ required: true, message: "请输入" }], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "editor", //类型
      label: "兑换活动规则", //标签
      name: "energy_sign_rule", //字段
      rules: [{ required: true, message: "请输入" }], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
    {
      type: "editor", //类型
      label: "规则", //标签
      name: "exchange_sign_rule", //字段
      rules: [{ required: true, message: "请输入" }], //规则
      formProps: {}, //form的props
      itemProps: {}, //item的props
    },
  ]
})
// 获取列表
const getData = () => {
  getList({
    s_group: props.type,
  }).then((res) => {
    if (res.code == 0) {
      const data = res.data;
      state.formData = data;
      let obj = {};
      data.map((item) => {
        obj[item.s_key] = item.s_value;
      });
      formRef.value.resetForm({
        ...obj,
      });

      // let list = state.formData
      // list = list.map(item => ({
      //   type: item.type, //类型
      //   label: item.s_name, //标签
      //   name: item.s_key, //字段
      //   rules: [{required: true, message: "请输入"}], //规则
      //   formProps:{},
      //   itemProps:{},
      // }))
      // listData.editAddList=list
      //
      // console.log('接口数据--',listData.editAddList)

    }
  });
};
// 保存
const editForm = (values) => {
  let params = state.formData.map((item) => {
    for (let key in values) {
      if (key === item.s_key) {
        return {
          s_key: key,
          s_value: values[key],
        };
      }
    }
  });
  edit({
    edit_data: params,
  }).then((res) => {
    if (res.code == 0) {
      message.success(res.msg);
      getData();
    }
  });
};
getData();
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;
  height: 100%;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
</style>